<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>行业数据--未来财经旗下p2p网贷门户</title>
<meta name="keywords" content="网贷,P2P网贷,P2P理财,未来网贷">
<meta name="description" content="未来网贷未来财经旗下的P2P网贷理财行业门户网站，提供全方位、权威的网贷平台数据，是您身边的网贷资讯和P2P理财方面的专家,为您的网贷之路保驾护航">
<style type="text/css">
	.hangye_dt span a{
		text-decoration: none;
	}
</style>
	<div class="guanjianci"></div>
		<div class="date_bottom">
	 <div class="date_bottom_t" >
      <p>纬度划分：</p>
      <p>
        <label for="fenbu_area" class="checked" >
        <input class="radio" name="fenbu" id="fenbu_area" type="radio" value="1" checked onClick="HoverLiFenbu(1);" />
        省份分布</label>
        </p>
      <p><label for="fenbu_date">
        <input class="radio" name="fenbu" id="fenbu_date" type="radio" value="0" onClick="HoverLiFenbu(2);" />
        时间</label></p>
      </div>
      
		<div class="date_bottom_b" id="provinceDateDiv">
			<ul>
				<li style="margin-right:8px;" class="demo">${date.year-1 }年：</li>
				<li><a href="javascript:;">1月</a></li>
				<li><a href="javascript:;">2月</a></li>
				<li><a href="javascript:;">3月</a></li>
				<li><a href="javascript:;">4月</a></li>
				<li><a href="javascript:;">5月</a></li>
				<li><a href="javascript:;">6月</a></li>
				<li><a href="javascript:;">7月</a></li>
				<li><a href="javascript:;">8月</a></li>
				<li><a href="javascript:;">9月</a></li>
				<li><a href="javascript:;">10月</a></li>
				<li><a href="javascript:;">11月</a></li>
				<li><a href="javascript:;">12月</a></li>  
			</ul>
			<ul>
			    <li style="margin-right:8px;" class="demo">${date.year }年：</li>
			    <c:forEach begin="1" end="${date.month }" varStatus="status">
					<li><a href="javascript:;"
						<c:if test="${status.current eq date.month }">
							class="current"
						</c:if>
					>${status.index-1 }月</a></li>
				</c:forEach>
			</ul>
		</div>  
	</div>

	<!--平台数据表格-->
	<div class="dis" id="fenbu_01">
		<!--地区表格形式-->
		<div class="form">
		  	<div class="form_content">
			    <dl id="provinceDl">
			    <dt class="hangye_dt">
						<span><a href="javascript:;">省份</a></span>
						<span><a href="javascript:;" text="volume" class="visited-1">成交量</a></span>
						<span class="line_height_16"><a href="javascript:;" text="volume_month_growth">月环比<br/>增长</a></span>
						<span class="line_height_16"><a href="javascript:;" text="operating_platform_num">运营平<br>台数量</a></span>
						<span class="line_height_16"><a href="javascript:;" text="platform_month_growth2">月环比<br/>增长</a></span>
						<span class="line_height_16"><a href="javascript:;" text="month_problem_num">当月问题<br>平台数量</a></span>
						<span class="line_height_16"><a href="javascript:;" text="problem_sum">累计问题<br>平台数量</a></span>
						<span><a href="javascript:;" text="loan_balance">贷款余额</a></span>
						<span><a href="javascript:;" text="compound_interest">综合利率</a></span>
						<span class="line_height_16"><a href="javascript:;" text="average_loan_time">平均借<br>款期限</a></span>
						<span class="line_height_16"><a href="javascript:;" text="month_investment_num">当月投<br>资人数</a></span>
						<span class="line_height_16"><a href="javascript:;" text="month_borrow_num">当月借<br>款人数</a></span>
					</dt>
					<div id="provinceDiv">
			    		<jsp:include page="industryProvinceTable.jsp"/>
			    	</div>
				</dl>
			</div>
		</div>
		<!--地区图表形式-->
		<div class="form">
			<div class="form_map">
				<h3 id="dqjs">
					<a href="javascript:void(0)" id="sec-xiala" >成交量</a>
					<div class="xiala" id="xiala">
					    <a href="javascript:void(0)">成交量</a>
					    <a href="javascript:void(0)">贷款余量</a>
					    <a href="javascript:void(0)">综合利率</a>
					    <a href="javascript:void(0)">平均借款期限</a>
					    <a href="javascript:void(0)">当月投资人数</a>
					    <a href="javascript:void(0)">当月借款人数</a>
					    <a href="javascript:void(0)">运营平台数量</a>
					</div>
				</h3>  
				<div class="graph" id="graph" style="height:550px;"> </div>
			</div>
		</div>
	</div>
	<!--地区分布结束-->
	<!--时间开始-->
	<div class="undis" id="fenbu_02">
		<div class="form">
			<div class="form_content">
				<dl id="dateDl">
					<jsp:include page="industryDateTable.jsp"/>
				</dl>
			</div>
		</div>
	</div>
	<!--时间结束-->
</div>
<script type="text/javascript">
/*时间分布/地区分布切换js开始*/
	function g1(o){
		return document.getElementById(o);
	}
	
	function HoverLiFenbu(n){
		//如果有N个标签,就将i<=N;
		for(var i=1;i<=2;i++){
			g1('fenbu_0'+i).className='undis';
		}
		g1('fenbu_0'+n).className='dis';
		
	}
	//数据报表
	function cockbaobiao(orderBy,dateData){
		$.ajax({
			url: "${basePath}/data/industryBaoBiao",
			data:{'orderBy':orderBy,'month':dateData['month'],'year':dateData['year']},
		    type: 'post',
		    dataType: "html",
			success: function(data){
	      	$("#graph").append(data);
	      }}
		);
	}
	//如果要做成点击后再转到请将<li>中的onmouseover 改成 onclic
	/*时间分布/地区分布切换js结束*/
	//自定义地区
	$(document).ready(function() {
		
		
		cockbaobiao("成交量",xuanzhongWhat());
		//地图检索
		$('.xiala').hide();  
		$('#sec-xiala').click(function(){				  
			//$('.zhibiao').toggle();		
			if($('.xiala').is(':hidden')==true)	{
				$('.xiala').show();
				$('#dqjs').css('background-image','url(${basePath}/images/shuju_14_02.png)');		  
			}else{
				 $('.xiala').hide();	 
				 $('#dqjs').css('background-image','url(${basePath}/images/shuju_14_01.png)');	 
			}
			
		});
	
		$('.xiala').find('a').click(function(event){
			var a=$(this).text();
			$('#sec-xiala').text(a);
			$('.xiala').hide(); 
			$('#dqjs').css('background-image','url(${basePath}/images/shuju_14_01.png)');
			cockbaobiao(a,xuanzhongWhat());
		});	  

		
		
		function  xuanzhongWhat(){
			var reg=/[\u4E00-\u9FA5]/g;
			var chlid = $(".date_bottom_b").find("ul").find("a[class='current']");
			var parent = $(chlid).parent().parent().find("li[class='demo']").text();
			 chlid=($(chlid).text()).replace(reg,'');
			 parent=parent.replace(reg,'');
			 parent = parent.replace("：",'');
			return {"year":parent,'month':chlid};
		}
		
		//导航浮动
		$(document).scroll(function(){
			var heigh=$(document).scrollTop();
			if(heigh>668){
			
				$(".form_content dl dt").css({'position':'fixed','top':'0','left':'50%','margin-left':'-500px','width':'1000px','box-shadow':'0 3px 5px #e2e2e2'});	 
			}else{
				$(".form_content dl dt").css({'position':'relative','top':'0','left':'0','margin-left':'0','width':'100%'});		 
			}
		}); 
	  
		 
			
	   var datelis = $(".date_bottom_b").find("ul").find("li").find("a");
		datelis.click(function() {
			datelis.removeClass("current");
			$(this).addClass("current");
			var year = $(this).parent().parent().children().first().text();
			var month = $(this).text();
			year = year.replace("年：", "");
			month = month.replace("月", "");
			
			var orderbyObj = getOrderByColumn();
			var orderby = orderbyObj.orderby;
			var column = orderbyObj.column;
			$("#provinceDiv").load("${basePath}/data/industryProvinceTable", {
				year:year,
				month:month,
				orderby:orderby,
				column:column
			});
			cockbaobiao($("#sec-xiala").text(),xuanzhongWhat());	
		})
		
		$("#fenbu_date").click(function(){
			$("#provinceDateDiv").hide();
		})
		
		$("#fenbu_area").click(function(){
			$("#provinceDateDiv").show();
		})
		
		$(".hangye_dt").find("a").click(function() {
			var text = $(this).text();
			if(text=='省份') return;
			var style = $(this).attr("class");
			var column = $(this).attr("text");
			var orderby = '';
			$(".hangye_dt").find("a").removeAttr("class");
			if(style==null||style==''||style=='visited-2') {
				orderby = 'desc';
				$(this).addClass("visited-1");
			} else if(style=='visited-1') {
				orderby = 'asc';
				$(this).addClass("visited-2");
			}
			
			var timeObj = getSelectTime();
			var year = timeObj.year;
			var month = timeObj.month;
			$("#provinceDiv").load('${basePath}/data/industryProvinceTable', {
				year:year,
				month:month,
				orderby:orderby,
				column:column
			})
		})
	
		
	});
	
	function getSelectTime() {
		var a = $("#provinceDateDiv").find("a[class='current']");
		console.info(a);
		var month = a.text();
		var year = a.parent().parent().children().first().text();
		year = year.replace("年：", "");
		month = month.replace("月", "");
		return {year:year,month:month};
	}
	
	function getOrderByColumn() {
		var a = $(".hangye_dt").find("a[class^='visited']");
		var orderbyStyle = a.attr("class");
		var orderby = "";
		if(orderbyStyle=='visited-1') 
			orderby = "desc";
		else if(orderbyStyle=='visited-2')
			orderby = "asc";
		var column = a.attr("text");
		return {orderby:orderby, column:column};
	}
</script>
<script>
$(function() {
  $('.date_bottom_t p label').click(function(){
    var radioId = $(this).attr('name');
    $('.date_bottom_t p label').removeAttr('class') && $(this).attr('class', 'checked');
    $('.date_bottom_t p label input.radio').removeAttr('checked') && $('#' + radioId).attr('checked', 'checked');
  });

});
</script>